import React, { useEffect, useState } from 'react';
import { Row, Col, Card, Switch, Statistic, Tooltip, Space } from 'antd'
import { history, connect } from 'umi';
import { ExclamationCircleOutlined, } from '@ant-design/icons'
import CardProps from './components/CardProps';
import moment from 'moment'
const Promoter = (props) => {
    const { dispatch } = props
    const [check, setCheck] = useState(false)
    const [data, setData] = useState({})
    const fetchPromoterData = () => {
        dispatch({
            type: 'promoter/fetchPromoterData',
            callback: (e) => {
                setData(e)
            }
        })

    }
    useEffect(() => {
        fetchPromoterData()
    }, [])
    const { promoterAmount, relationUserAmount, inviteUserAmount, saleMoney, commission, saleOrderAmount } = data
    return <Row gutter={[12, 12]}>
        <Col span={24}>
            <Card title={<Space>
                <div>数据概况</div>
                <div style={{ color: '#999999' }}>统计时间:{moment().format('YYYY-MM-DD HH:mm')}</div>
            </Space>}
                bordered={false}>
                <Row>
                    <Col span={4}>
                        <Statistic value={promoterAmount} title={<div style={{ color: '#333333' }}>推广员数<Tooltip title='截至当前统计时间，店铺推广员总数（不含已清退推广员）'>
                            <ExclamationCircleOutlined></ExclamationCircleOutlined>
                        </Tooltip>
                        </div>}>
                        </Statistic>
                    </Col>
                    <Col span={4}>
                        <Statistic value={relationUserAmount} title={<div style={{ color: '#333333' }}>绑定客户数<Tooltip title='截至当前统计时间，店铺绑定客户总数（不含已解绑客户）'>
                            <ExclamationCircleOutlined></ExclamationCircleOutlined>
                        </Tooltip>
                        </div>}>
                        </Statistic>
                    </Col>
                    <Col span={4}>
                        <Statistic value={inviteUserAmount} title={<div style={{ color: '#333333' }}>邀约新客户数<Tooltip title='截至当前统计时间，店铺新邀请客户总数（不含已解绑客户）'>
                            <ExclamationCircleOutlined></ExclamationCircleOutlined>
                        </Tooltip>
                        </div>}>
                        </Statistic>
                    </Col>
                    <Col span={4}>
                        <Statistic precision={2} value={saleMoney} title={<div style={{ color: '#333333' }}>累计订单金额<Tooltip title='截至当前统计时间，店铺累计成功支付的推广员订单总实付金额（不包含待结算、待结算（未实名）、待结算（部分退款）以及由于开通个税代缴后用户未签约/全额退款导致不结算的订单金额，不剔除结算后退款的订单金额）'>
                            <ExclamationCircleOutlined></ExclamationCircleOutlined>
                        </Tooltip>
                        </div>}>
                        </Statistic>
                    </Col>

                    <Col span={4}>
                        <Statistic value={saleOrderAmount} title={<div style={{ color: '#333333' }}>累计订单数<Tooltip title='截至当前统计时间，店铺累计订单数'>
                            <ExclamationCircleOutlined></ExclamationCircleOutlined>
                        </Tooltip>
                        </div>}>
                        </Statistic>
                    </Col>
                    <Col span={4}>
                        <Statistic precision={2} value={commission} title={<div style={{ color: '#333333' }}>推广员累计收益金额<Tooltip title='截至当前统计时间，店铺累计已结算的推广员商品佣金+邀请人奖励总金额（不包含待结算、待结算（未实名）、待结算（部分退款）及由于开通个税代缴后用户未签约/全额退款导致不结算的订单产生的收益）'>
                            <ExclamationCircleOutlined></ExclamationCircleOutlined>
                        </Tooltip>
                        </div>}>
                        </Statistic>
                    </Col>
                </Row>
            </Card>
        </Col>
        <CardProps></CardProps>
    </Row>
}

export default connect(({ loading }) => ({
    loading: loading.models.promoter,
}))(Promoter);
